<template>
<view>
<view class="body" v-if="info.count">
    <view class="head">
        <view class="title">{{info.name}}（{{info.count}}篇）</view>
        <view class="userinfo row">
            <image :src="info.img ? info.img : '/static/images/default_img.png'" class="avatar"></image>
            <view class="coll-name">{{info.nickname ? info.nickname : '***'}}的收藏夹</view>
        </view>
    </view>
    <view class="content">
        <view v-for="(item, index) in info.data" :key="index" class="pd-item">
            <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.value.id + '&type=' + item.value.nav + '&city=' + item.citycode" hover-class="none">
                <view class="title-box">
                    <view class="title">{{item.value.title}}</view>
                    <view class="time">{{item.value.publictime}}</view>
                </view>
                <image :src="item.value.images" mode="aspectFill" v-if="item.value.images"></image>
            </navigator>
        </view>
    </view>
    <view class="bottom row">
        <view class="share row center" @tap="share">
            <image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020095551_29653.png" class="share-img"></image>
            <view>收藏</view>
        </view>
        <navigator class="app" url="/pages/mine/follow/follow">去本地宝APP</navigator>
    </view>
</view>
<view class="none" v-else>
    <view class="to-add flex col center" :s-if="!hasContent">
        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014151841_43252.png" class="none-icon"></image>
        <view class="tips">该收藏夹不存在</view>
        <navigator url="/pages/index/index" open-type="switchTab" class="go">回到首页</navigator>
    </view>
</view>
</view>
</template>

<script>
const app = getApp();
import util from "../../../../utils/util";
var page = 1;
var size = 15;
var hasContent = true;

export default {
  data() {
    return {
      citycode: "",
      info: {}
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.setData({
      citycode: uni.getStorageSync("citycode")
    });
    this.user = decodeURIComponent(options.user);
    this.ids = [];
    util.getUrl(app.globalData.url).then(res => {
      util.request("share.php", {
        action: "user_decode",
        user: decodeURIComponent(this.user),
        size: 10,
        page
      }, "POST").then(res => {
        if (res.data.message == "success" && res.data.data.count) {
          res.data.data.data.forEach(item => {
            this.ids.push(item.id);
            if (item.value && item.value != "undefined") item.value = JSON.parse(item.value);
          });
          this.setData({
            info: res.data.data
          });
        }
      });

      if (!uni.getStorageSync("user_id")) {
        util.request("user.php", {
          action: "get_userid",
          baidu_openid: res.data.data.openid
        }, "POST").then(res => {
          uni.setStorageSync("user_id", res.data.data.id);
        });
      }
    }); // 监听页面加载的生命周期函数
  },

  onReachBottom() {
    ++page;
    if (hasContent) util.request("share.php", {
      action: "user_decode",
      user: this.user,
      size,
      page
    }, "POST").then(res => {
      if (res.data.data.count) {
        res.data.data.data.forEach(item => this.info.data.push(item));
        this.setData({
          info: this.info
        });
      } else {
        uni.showToast({
          title: '没有更多数据了',
          icon: 'none',
          image: '',
          duration: 1500
        });
        hasContent = false;
      }
    });
  },

  methods: {
    share() {
      uni.showModal({
        title: '温馨提示',
        content: '是否将此收藏夹内容给添加到您的收藏夹',
        showCancel: true,
        cancelText: '取消',
        cancelColor: '#000000',
        confirmText: '确定',
        confirmColor: '#3CC51F',
        success: result => {
          if (result.confirm) {
            util.request("share.php", {
              action: "user_decode",
              openid: uni.getStorageSync("openid"),
              user_id: uni.getStorageSync("user_id"),
              ids: this.ids.join(",")
            }, "POST").then(res => {
              if (res.data.message == "success") {
                uni.showToast({
                  title: '添加收藏成功',
                  icon: 'none',
                  image: '',
                  duration: 1500,
                  mask: false,
                  success: result => {
                    uni.reLaunch({
                      url: '/pages/mine/collect/index/index'
                    });
                  }
                });
              }
            });
          }
        }
      });
    }

  }
};
</script>
<style>
.head {
    padding: 30rpx;
    border-bottom: 2rpx solid #F9F9F9;
}

.content {
    margin: 30rpx;
}

.pd-item {
    margin-top: 16px;
}

.pd-item .items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.pd-item .items image {
    width: 198rpx;
    height: 144rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
}

.pd-item .items .title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20rpx;
}

.pd-item .items .title-box .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #333;
    line-height: 40rpx;
}

.pd-item .items .title-box .time {
    font-size: 22rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #989696;
    margin-top: 20rpx;
}

.share,
.app {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 28rpx;
    color: #FFFFFF;
    border-radius: 15rpx;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: rgb(242, 242, 242);
}

.share {
    width: 30%;
    margin-right: 38rpx;
    color: #141414;
    background-color: #FFFFFF;
}

.share-img {
    width: 38rpx;
    height: 38rpx;
    margin-right: 40rpx;
}

.app {
    width: 70%;
    background-color: #ff6600;
}

.avatar {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    margin-right: 18rpx;
}

.coll-name {
    font-size: 28rpx;
    color: rgb(127, 127, 127);
}

.title {
    margin-bottom: 40rpx;
    font-size: 38rpx;
    font-weight: bold;
}

.none-icon {
    width: 422rpx;
    height: 268rpx;
    margin-top: 200rpx;
    margin-bottom: 46rpx;
}

.tips {
    margin-bottom: 66rpx;
    font-size: 28rpx;
    color: #A7A6A6;
}

.go {
    height: 60rpx;
    width: 172rpx;
    line-height: 60rpx;
    text-align: center;
    color: #7A7A7A;
    background: #eeeeee;
    border-radius: 14rpx;
}
</style>